<!--
 * @Description: 线图demo
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2020-08-12 15:14:43
 * @LastEditTime: 2020-09-04 09:12:35
-->
<template>
    <ScreenContainer class="lineCharts demo">
        <!-- 标准单线 -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine1"
                       title="标准单线"
                       valEnding="%"
                       smooth
                       label />
        </div>
        <!-- 标准多线 -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine2"
                       title="标准多线"
                       xName="姓名"
                       yName="数量"
                       smooth />
        </div>
        <!-- 标准横向单线 -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine1"
                       title="标准横向单线"
                       xName="数量"
                       yName="姓名"
                       horizontal
                       smooth />
        </div>
        <!-- 标准横向多线 -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine2"
                       title="标准横向多线"
                       xName="数量"
                       yName="姓名"
                       horizontal
                       smooth />
        </div>
        <!-- 横向滚动条(带视觉映射) -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine1"
                       title="横向滚动条(带视觉映射)"
                       xName="姓名"
                       yName="数量"
                       :dataZoom="dataZoom1"
                       :visualMap="visualMap"
                       smooth />
        </div>
        <!-- 纵向滚动条 -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine1"
                       :dataZoom="dataZoom2"
                       title="纵向滚动条"
                       yName="数量"
                       xName="姓名"
                       smooth />
        </div>
        <!-- 正负轴横向单线 -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine3"
                       title="正负轴横向单线"
                       xName="数量"
                       yName="姓名"
                       horizontal
                       smooth />
        </div>
        <!-- 标注标线标域(自定义颜色) -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine1"
                       :markPoint="markPoint"
                       :markLine="markLine"
                       :markArea="markArea"
                       right="45"
                       title="标注标线标域(自定义颜色)"
                       xName="姓名"
                       yName="数量"
                       :colors="['#ff5722']"
                       smooth />
        </div>
        <!-- 标准面积图 -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine2"
                       title="标准面积图"
                       xName="姓名"
                       yName="数量"
                       smooth
                       areaStyle />
        </div>
        <!-- 堆积面积图 -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine2"
                       title="堆积面积图"
                       xName="姓名"
                       yName="数量"
                       smooth
                       areaStyle
                       stack />
        </div>
        <!-- 区域划分 -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine4"
                       title="区域划分"
                       xName="姓名"
                       yName="数量"
                       :markArea="markArea2"
                       boundaryGap
                       smooth />
        </div>
        <!-- 面积标域 -->
        <div class="box">
            <lineChart :apiMethod="getData"
                       apiParam="getLine1"
                       title="面积标域"
                       xName="姓名"
                       yName="数量"
                       :markLine="markLine2"
                       :visualMap="visualMap2"
                       :areaStyle="areaStyle"
                       :lineStyle="lineStyle"
                       smooth />
        </div>
    </ScreenContainer>
</template>

<script>
import { getData } from '@/api/demo' //API 请求数据
import ScreenContainer from '@/components/pages/screenContainer.vue' //全局容器
import lineChart from '@/components/charts/default/lineChart.vue' //折线图
export default {
    name: 'lineCharts',
    components: {
        ScreenContainer,
        lineChart,
    },
    data() {
        return {
            getData, //api方法
            dataZoom1: {
                //横向滚动条
                xAxisIndex: [0], //滚动数据源，这里默认第一条X轴，若为横向线图可设置y轴。若为多轴图，可调整下标
                minValueSpan: 1, //最小显示到的线下标，1为2单位线
                maxValueSpan: 3, //最大显示到的线下标，3为4单位线
            },
            dataZoom2: {
                //纵向滚动条
                yAxisIndex: [0],
                start: 0, //滚动条默认显示当前轴数据范围，start为起始值，end为结束值，这里为百分比，最小0，最大100
                end: 80,
            },
            markPoint: {
                //标注
                data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' },
                ],
                label: {
                    color: '#fff',
                    textBorderColor: '#000',
                    formatter: function (params) {
                        return `${params.name}\n${params.value}`
                    },
                },
            },
            markLine: {
                //标线
                data: [{ type: 'average', name: '平均值' }],
                label: {
                    formatter: function (params) {
                        return `${params.name}\n${params.value}`
                    },
                },
            },
            markArea: {
                //标域
                label: {
                    position: 'right',
                },
                data: [
                    [
                        {
                            name: '标域',
                            yAxis: '200',
                        },
                        {
                            yAxis: '500',
                        },
                    ],
                ],
            },
            visualMap: {
                top: 10,
                right: 0,
                pieces: [
                    {
                        lte: 200,
                    },
                    {
                        gt: 200,
                        lte: 400,
                    },
                    {
                        gt: 400,
                        lte: 600,
                    },
                    {
                        gt: 600,
                        lte: 800,
                    },
                    {
                        gt: 800,
                    },
                ],
            },
            markLine2: {
                //横轴标域（面积,配合视觉映射，配合visualMap、areaStyle、lineStyle）
                symbol: ['none', 'none'], //不显示箭头
                label: { show: false },
                data: [{ xAxis: 2 }, { xAxis: 4 }],
            },
            visualMap2: {
                //横轴标域（面积,配合markLine、areaStyle、lineStyle）
                type: 'piecewise',
                show: false, //不显示视觉映射图例
                dimension: 0,
                seriesIndex: 0,
                pieces: [
                    {
                        gt: 2,
                        lt: 4,
                        color: 'rgba(0, 180, 0, 0.5)',
                    },
                ],
                outOfRange: false,
            },
            areaStyle: {},
            lineStyle: {
                color: '#5ef5ff',
                width: 2,
            },
            markArea2: {
                //区域划分
                data: [
                    [
                        { xAxis: '1月' },
                        {
                            name: '一季度',
                            xAxis: '3月',
                            // x: '25%',
                            itemStyle: {
                                color: '#8bc34a91',
                            },
                        },
                    ],
                    [
                        {
                            name: '二季度',
                            xAxis: '4月',
                            // x: (100 / 11) * 3.25 + '%',
                            itemStyle: {
                                color: '#ffffb2bf',
                            },
                        },
                        {
                            xAxis: '6月',
                            // x: '50%',
                        },
                    ],
                    [
                        {
                            name: '三季度',
                            xAxis: '7月',
                            // x: '50%',
                            itemStyle: {
                                color: '#ff9800a6',
                            },
                        },
                        {
                            xAxis: '9月',
                            // x: (100 / 11) * 2.35 + 50 + '%',
                        },
                    ],
                    [
                        {
                            name: '四季度',
                            xAxis: '10月',
                            // x: (100 / 11) * 2.35 + 50 + '%',
                            itemStyle: {
                                color: '#97cdd4b8',
                            },
                        },
                        { xAxis: '12月' },
                    ],
                ],
            },
        }
    },
}
</script>
<style lang="scss" scoped>
.demo {
    .box {
        width: 25%;
        height: 33.333%;
    }
}
</style>
